這裡開始是實戰的學習紀錄，首先我們要先創建一個新專案，採用 Vue Cli
安裝辦法參考這裡 鐵人賽Day28 - Vue Cli

接著進行 vue router 的安裝跟配置 鐵人賽Day30 - Vue Router 及配置路由文件

接著我們要來安裝 axios 套件，同樣也可以參考 鐵人賽Day28 - Vue Cli

都好了之後，因為我有申請私人的 API 所以這裡就不多贅述
先到 App.vue 測試剛剛的 API 是否能用，到 script 的地方新增一個 created 的 hook，在參考 axios 官方文件的使用方法讀取 API:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = 'https://vue-course-api.hexschool.io/api/jerryproduct/products';
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

好了之後，因為有時候 API 的伺服器會變，所以我們要把網址的部分給獨立出去
這時候到 config 資料夾底下，會有 dev.env.js 這隻檔案，這個是開發時候拿來放置環境變數的，prod.env.js 是正式上線的版本，所以到時候在 dev.env.js 新增的環境變數也都要複製過去 prod.env.js
到 dev.env.js 之後，我們新增兩個環境變數:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  APIPATH: '"https://vue-course-api.hexschool.io"',
  CUSTOMPATH: '"jerryproduct"',
})

主要就是 APIPATH 和 CUSTOMPATH
接著我們到 App.vue 來測試看看兩個變數是否能運行:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = 'https://vue-course-api.hexschool.io/api/jerryproduct/products';
    console.log(process.env.APIPATH, process.env.CUSTOMPATH);
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

主要是 console 那行程式碼，確定能運行之後，我們就可以稍微改寫一下變數 api 了:

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    const api = `${process.env.APIPATH}/api/${process.env.CUSTOMPATH}/products`;
    this.$http.get(api).then((response) => {
      console.log(response.data);
    });
  },
}
</script>

主要是變數 api 的部分，用 ES6 的字串模板給組起來了